<script setup lang="ts">
import { reactive } from 'vue'
import { ElIcon, ElDescriptions, ElDescriptionsItem, ElCard } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'

const info = reactive({
  admin_c: 'CH1302-AP',
  country: 'CN',
  descr: 'China Unicom Shandong province network',
  descr2: 'China Unicom',
  inetnum: '60.208.0.0 - 60.217.255.255',
  mnt_by: 'APNIC-HM',
  mnt_irt: 'IRT-CU-CN',
  mnt_lower: 'MAINT-CNCGROUP-SD',
  mnt_routes: 'MAINT-CNCGROUP-RR',
  net_name: 'UNICOM-SD',
  source: 'APNIC',
  status: 'ALLOCATED PORTABLE',
  tech_c: 'XZ14-AP',
  update_date: '2016-05-03 23:58:35'
})
</script>
<template>
  <div class="title-contianer">
    <div class="title">基本信息</div>
    <el-icon><Warning /></el-icon>
  </div>
  <el-card shadow="never">
    <el-descriptions :column="2">
      <el-descriptions-item label="admin_c:">{{ info.admin_c }}</el-descriptions-item>
      <el-descriptions-item label="country:">{{ info.country }}</el-descriptions-item>
      <el-descriptions-item label="descr:">{{ info.descr }}</el-descriptions-item>
      <el-descriptions-item label="descr2:">{{ info.descr2 }}</el-descriptions-item>
      <el-descriptions-item label="inetnum:">{{ info.inetnum }}</el-descriptions-item>
      <el-descriptions-item label="mnt_by:">{{ info.mnt_by }}</el-descriptions-item>
      <el-descriptions-item label="mnt_irt:">{{ info.mnt_irt }}</el-descriptions-item>
      <el-descriptions-item label="mnt_lower:">{{ info.mnt_lower }}</el-descriptions-item>
      <el-descriptions-item label="mnt_routes:">{{ info.mnt_routes }}</el-descriptions-item>
      <el-descriptions-item label="net_name:">{{ info.net_name }}</el-descriptions-item>
      <el-descriptions-item label="source:">{{ info.source }}</el-descriptions-item>
      <el-descriptions-item label="status:">{{ info.status }}</el-descriptions-item>
      <el-descriptions-item label="tech_c:">{{ info.tech_c }}</el-descriptions-item>
      <el-descriptions-item label="update_date:">{{ info.update_date }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>
<style scoped lang="scss">
.title-contianer {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
  .title {
    font-weight: 700;
    margin-right: 0.625rem;
  }
}
</style>
